<template>
  <div class="companysop_management">
    <Button type="primary" class="operation" @click="operationClick">操作日志</Button>
    <Tabs :value="sopType" type="card" @on-click="tabClick" :animated="false">
      <TabPane label="任务配置" name="0">
        <div class="tips1">
          <Icon type="ios-alert" size="24" color="#2d8cf0" />
          当前有{{ noAvailSopList ? noAvailSopList.length : 0 }}个任务的“任务责任人”已失效，请尽快变更责任人
          <span @click="findNoAvailSop">立即查看</span>
        </div>

        <dt-grid ref="table" :onFetch="onFetch" :scrollDefault="false" />
      </TabPane>
      <TabPane label="其他配置" name="1">
        <div v-for="itemP in list" :key="itemP.type">
          <Row class="label_warp">
            <Col flex="auto" class="label_txt">
              {{ itemP.label }}
              <span class="tips">
                <Icon type="md-alert" class="tips_icon" />
                提示：{{ itemP.tips }}
              </span>
            </Col>
            <!-- <Col flex="60px">
              <Button
                type="primary"
                v-if="itemP.SopSort.length != 0"
                @click="edit(itemP)">
                编辑1
              </Button>
            </Col> -->
          </Row>
          <Row type="flex" justify="start" class="sop_content">
            <Col span="8" v-for="(item, index) in itemP.SopSort" :key="index">
              <Row type="flex" justify="start" class="item_class">
                <Col span="8">
                  {{ item.sopName }}
                </Col>
                <Col span="16">
                  <span class="badge_warp" v-if="item.isTaskShowBtn">
                    <Badge :status="item.isTaskAssess ? 'success' : 'error'" />
                    {{ item.isTaskAssess ? item.openTaskTxt : item.closeTaskTxt }}
                  </span>
                  <span class="badge_warp" v-if="item.isShowBtn">
                    <Badge :status="item.isAssess ? 'success' : 'error'" />
                    {{ item.isAssess ? item.openTxt : item.closeTxt }}
                  </span>
                  <Button type="text" @click="editFun(itemP, item)" class="edit_txt">编辑</Button>
                </Col>
              </Row>
            </Col>
          </Row>
        </div>
      </TabPane>
    </Tabs>

    <edit-sop ref="editSop" @success="onSuccess" />
    <task-sop ref="taskSop" @success="taskSopConfig" @updateList="updateList" />
    <task-single-node ref="taskSingleNode" @success="taskSingleNodeConfig" />
    <task-multi-node ref="taskMultiNode" @success="taskMultiNodeConfig" @editNode="editNode" />
    <points ref="points"></points>
    <responsible ref="responsible" @success="respoinsibleSuccess"></responsible>
    <dt-loading :loading="loading" />
    <operation-record ref="operationRecord"></operation-record>
  </div>
</template>

<script>
  import sopApi from '@/biz/buildingManagement/sopConfig'
  import editSop from './component/editSop.vue'
  import taskSop from './component/taskSop.vue'
  import taskSingleNode from './component/taskSingleNode.vue'
  import taskMultiNode from './component/taskMultiNode.vue'
  import responsible from './component/responsible.vue'
  import points from './component/points.vue'
  import columnOpt from './opt/column.js'
  export default {
    components: {
      editSop,
      taskSop,
      taskSingleNode,
      taskMultiNode,
      responsible,
      points
    },
    data() {
      return {
        params: null,
        page: {
          total: 0,
          current: 1
        },
        sopType: '0',
        SopSort: [],
        list: [
          // { label: "任务配置", type: '1', flag: false, tips: "修改SOP考核项后，即时生效", SopSort: [] },
          // { label: "扣分项配置", type: '3', flag: false, tips: "修改扣分项配置后，即时生效", SopSort: [] },
          {
            label: '订单附件配置',
            type: '2',
            flag: false,
            tips: '修改后只对新产生的订单生效',
            SopSort: []
          },
          {
            label: '奖金配置',
            type: '4',
            flag: false,
            tips: '修改后即时生效',
            SopSort: []
          }
        ],
        loading: false,
        currentRow: null,
        noAvailSopList: [],
        noAvailSopList1: []
      }
    },
    mounted() {
      this.$refs.table.init(this, new columnOpt(this))
      this.$refs.table.fetch()
    },
    methods: {
      updateList() {
        this.$refs.table.fetch()
      },
      findNoAvailSop() {
        this.noAvailSopList1 = this.noAvailSopList
        this.$refs.table.fetch()
      },
      noAvailSop() {
        sopApi.noAvailSop().then((res) => {
          this.noAvailSopList = res
        })
      },
      editNode(row) {
        this.$refs.taskSingleNode.show(row, 'more')
      },
      taskMultiNodeConfig() {},
      taskSingleNodeConfig(val) {
        if (val == 'more') {
          this.$refs.taskMultiNode.$refs.table.fetch()
        }
        this.$refs.table.fetch()
      },
      taskSopConfig() {},
      checkFun1(row) {
        this.$refs.taskSop.show(row)
      },
      checkFun2(row) {
        console.log(row, '222222222')
        if (row.pointType == 1) {
          this.$refs.taskSingleNode.show(row)
        } else {
          this.$refs.taskMultiNode.show(row)
        }
      },
      checkFun3(row) {
        this.$refs.responsible.show(row)
      },
      checkFun4(row) {
        this.$refs.points.show(row)
      },

      checkFun5(row) {
        this.$Modal.confirm({
          title: '责任人同步至案场',
          content: '<p>是否将责任人同步至案场</p>',
          onOk: () => {
            let params = {
              configId: row.id
            }
            sopApi
              .leaderSync(params)
              .then((res) => {
                this.$Message.success('同步成功')
                this.$refs.table.fetch()
              })
              .catch(() => {})
          },
          onCancel: () => {}
        })
      },
      // 列表数据
      onFetch(data) {
        this.paramsAll = data
        if (this.noAvailSopList1 && this.noAvailSopList1.length) {
          this.paramsAll.configIds = this.noAvailSopList1
        }

        return sopApi
          .sopSettingList(this.paramsAll)
          .then((res) => {
            this.noAvailSop()
            return res
          })
          .catch((err) => {})
      },
      tabClick(val) {
        if (val == 0) {
          this.noAvailSopList1 = []
          this.noAvailSop()
          this.$refs.table.fetch()
        } else {
          this.init()
        }
      },

      operationClick() {
        this.$refs.operationRecord.show('operation_sop', 'M_2')
      },
      onSuccess() {
        this.init()
        this.$refs.table.fetch()
      },
      respoinsibleSuccess() {
        this.$refs.table.fetch()
      },
      init() {
        this.loading = true
        sopApi
          .sopSettingOtherList({})

          .then((res) => {
            this.list[0].SopSort = []
            this.list[1].SopSort = []
            res &&
              res.forEach((item) => {
                if (item.type == 2) {
                  this.list[0].SopSort.push(item)
                } else if (item.type == 4) {
                  this.list[1].SopSort.push(item)
                }
                //  if (item.type == 1) {
                //   this.list[0].SopSort.push(item)
                // } else if (item.type == 2) {
                //   this.list[2].SopSort.push(item)
                // } else if (item.type == 3) {
                //   this.list[1].SopSort.push(item)
                // } else if (item.type == 4) {
                //   this.list[3].SopSort.push(item)
                // }
              })
            this.list.forEach((item) => {
              item.SopSort = this.$tool.bubbleSort(item.SopSort, 'sort')
            })
            this.loading = false
          })
          .catch(() => {
            this.loading = false
          })
      },
      //单个编辑
      editFun(obj, data) {
        let tmpObj = this.$tool.deepClone(obj)
        tmpObj.SopSort = [data]
        tmpObj.updateType = '0'
        this.$refs.editSop.show(tmpObj)
      },
      //整体编辑
      edit(data) {
        data.updateType = '1'
        this.$refs.editSop.show(data)
      }
    },
    created() {}
  }
</script>
<style lang="scss" scoped>
  .companysop_management {
    position: relative;
    padding: 15px;
    overflow: auto;

    .label_warp {
      padding: 10px;

      .label_txt {
        font-size: 18px;
      }

      .tips {
        text-align: right;
        line-height: 32px;
        font-size: 14px;

        .tips_icon {
          font-size: 20px;
          color: #0f42a7;
          vertical-align: sub;
        }
      }
    }

    .sop_content {
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-bottom: 30px;

      .item_class {
        padding: 15px;
        font-size: 16px;
        line-height: 30px;

        .edit_txt {
          font-size: 16px;
          color: #2d8cf0;
        }
      }

      ::v-deep .ivu-badge-status-dot {
        width: 10px;
        height: 10px;
      }

      .badge_warp {
        width: 100px;
        display: inline-block;
      }
    }

    .btnSop {
      display: flex;
      flex-direction: row;
      justify-content: end;

      > * {
        margin-left: 10px;
      }
    }

    .tips1 {
      background: rgba(254, 252, 236, 1);
      display: block;
      width: 500px;
      padding: 5px;

      .ivu-icon-ios-alert:before {
        vertical-align: -2px;
      }

      span {
        cursor: pointer;
        color: #2d8cf0;
        margin-right: 20px;
      }
    }

    .operation {
      position: absolute;
      top: 10px;
      right: 20px;
      z-index: 9;
    }
  }
</style>
